<template>
  <el-card class="box-card">
    <div>
      <!-- 角色数据表单 -->
      <el-table ref="multipleTable" :data="dataList" border style="width: 100%">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="项目编号" prop="projectId" width="80">
        </el-table-column>
        <el-table-column label="项目名称" prop="project.name" width="150">
        </el-table-column>
        <el-table-column label="项目审核状态" prop="status" width="110">
        </el-table-column>
        <el-table-column label="项目创建人" prop="user.username" width="150">
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime" width="180">
        </el-table-column>
        <el-table-column
          label="最近一次的修改时间"
          prop="updateTime"
          width="180"
        >
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="lookEdit(scope.$index, scope.row)"
            >
              查看项目
            </el-button>
            <el-button
              size="mini"
              type="success"
              @click="handleShare(scope.$index, scope.row)"
            >
              分配审核人员
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 查看打开的界面 -->
      <el-dialog
        :model="formLook"
        :visible.sync="dialogFormVisibleLook"
        title="项目详情"
        width="40%"
      >
        <el-descriptions title="项目信息">
          <el-descriptions-item label="项目编号">
            {{ this.formLook.project.id }}
          </el-descriptions-item>
          <el-descriptions-item label="项目名称">
            {{ this.formLook.project.name }}
          </el-descriptions-item>
          <el-descriptions-item label="项目类型">
            {{ this.formLook.project.type }}
          </el-descriptions-item>
          <el-descriptions-item label="项目状态">
            {{ this.formLook.status === null ? "没有分配审核" : this.formLook.status }}
          </el-descriptions-item>
          <el-descriptions-item label="项目创建人">
            <el-tag size="small">
              {{ this.formLook.user.name }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="项目说明">
            {{ this.formLook.project.remark }}
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions column:2>
          <el-descriptions-item label="申请资金">
            {{ this.formLook.project.money }}
          </el-descriptions-item>
          <el-descriptions-item label="创建时间">
            {{ this.formLook.createTime }}
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions>
          <el-descriptions-item label="最近一次修改时间" prop="updateTime">{{
              this.formLook.updateTime
            }}
          </el-descriptions-item>
        </el-descriptions>
        <el-divider></el-divider>
        <el-descriptions title="项目创建者信息">
          <el-descriptions-item label="账号">
            {{ this.formLook.user.username }}
          </el-descriptions-item
          >
          <el-descriptions-item label="姓名">
            <el-tag size="small">{{ this.formLook.user.name }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="邮箱">{{
              this.formLook.user.email
            }}
          </el-descriptions-item>
          <el-descriptions-item label="手机号码">{{
              this.formLook.user.mobile
            }}
          </el-descriptions-item>
          <el-descriptions-item label="账号状态">{{
              this.formLook.user.status === 0 ? "激活" : "禁用"
            }}
          </el-descriptions-item>
        </el-descriptions>
      </el-dialog>
      <!-- 新增按钮打开的页面 -->
      <el-dialog :visible.sync="dialogFormVisible" title="创建项目" width="35%">
        <el-form :model="form">
          <el-form-item label="项目名称" label-width="120px">
            <el-input
              v-model="form.project.name"
              autocomplete="off"
              placeholder="项目名称"
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item label="项目内容" label-width="120px">
            <el-input
              v-model="form.project.content"
              autocomplete="off"
              placeholder="项目内容"
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item label="项目类型" label-width="120px">
            <el-input
              v-model="form.project.type"
              autocomplete="off"
              placeholder="项目类型"
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item label="申请资金" label-width="120px">
            <el-input
              v-model="form.project.money"
              autocomplete="off"
              placeholder="申请资金"
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item label="项目说明" label-width="120px">
            <el-input
              v-model="form.project.remark"
              style="width: 300px"
              type="textarea"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="check()">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 分配按钮打开的页面 -->
      <el-dialog
        :visible.sync="dialogFormVisibleShare"
        title="分配审核人员"
        width="50%"
      >
        <!-- 穿梭表 -->
        <div style="text-align: center">
          <el-transfer
            v-model="value"
            :button-texts="['取消分配', '分配项目']"
            :data="data"
            :format="{
              noChecked: '${total}',
              hasChecked: '${checked}/${total}',
            }"
            :titles="['可选的审核人员', '已分配的审核人员']"
            filterable
            style="text-align: left; display: inline-block"
            @change="selectChange()"
          >
          </el-transfer>
        </div>
      </el-dialog>
      <!-- 页号 -->
      <el-pagination
        :current-page="pageIndex"
        :page-size="pageSize"
        :page-sizes="[5, 10, 20, 50, 100]"
        :total="totalPage"
        layout="total ,sizes,prev,pager,next,jumper"
        style="margin-top: 30px"
        @size-change="sizeChangeHandle"
        @current-change="CurrentChangeHandle"
      >
      </el-pagination>
    </div>
  </el-card>
</template>
<script>
export default {
  name: "ShareProject",
  data() {
    return {
      //新增
      form: {
        project: {
          name: "",
          content: "",
          type: "",
          money: "",
          mobile: "",
        },
        user: {
          username: "",
        },
      },
      //查看
      formLook: {
        project: {},
        user: {},
      },
      //编辑
      formChange: {
        id: "",
        project: {
          id: "",
          name: "",
          content: "",
          type: "",
          money: "",
          remark: "",
        },
      },
      dataList: [], //页面展示的数据集合
      shareUser: [], //已经分配给该项目的审核人员
      allShareUser: [], //所有审核人员
      pageIndex: 1,
      pageSize: 5,
      totalPage: 0,
      begin: 0,
      end: this.pageSize - 1,
      dialogFormVisible: false, //默认关闭新建用户界面
      dialogFormVisibleChange: false, //默认关闭编辑用户界面
      dialogFormVisibleLook: false, //查看界面
      dialogFormVisibleShare: false, //分配审核人员界面
      value: [],
      data: [],
      projectId: 0,//存储审核项目ID
    };
  },
  methods: {
    //改变数组大小
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.getDataList();
    },
    //改变当前页号
    CurrentChangeHandle(val) {
      this.pageIndex = val;
      this.dataList = [];
      this.getDataList();
    },
    //检查创建项目时是否有未填项
    check() {
      if (this.form.project.name === "") {
        //项目名称为空
        this.$message({
          type: "error",
          message: "项目名称为空",
        });
      } else {
        if (this.form.project.content === "") {
          //项目内容为空
          this.$message({
            type: "error",
            message: "项目内容为空",
          });
        } else {
          if (this.form.project.money === "") {
            this.$confirm("当前申请资金为0,是否继续创建项目？", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            })
              .then(() => {
                this.onSubmit();
              })
              .catch(() => {
                this.$message({
                  type: "info",
                  message: "已取消创建项目",
                });
              });
          }
        }
      }
    },
    //新增页面的确认键
    onSubmit() {
      this.dialogFormVisible = false; //关闭窗口
      this.form.user.username = sessionStorage.getItem("username");
      this.$http.post("/item/add", this.form).then((res) => {
        //刷新页面
        this.getDataList();
      });
    },
    //编辑页面的确认键
    onSubmitChange() {
      this.$http.post("/item/update", this.formChange).then((res) => {
        //关闭编辑用户界面
        this.dialogFormVisibleChange = false;
        //刷新页面
        this.getDataList();
      });
    },
    //查询所有数据
    getDataList() {
      const pageInfo = this.$getPageInfo(this.pageSize, this.pageIndex)
      this.$http.post("/item/getList", pageInfo).then((res) => {
        this.cutDataList(res);
      });
    },
    cutDataList(res) {
      const data = this.$cutPageDataList(res)
      this.dataList = data.dataList
      this.totalPage = data.totalPage
    },
    //查看按钮
    lookEdit(index, item) {
      //回显数据
      this.formLook = item;
      //打开项目详细界面
      this.dialogFormVisibleLook = true;
    },
    //编辑按钮
    handleEdit(index, item) {
      this.dialogFormVisibleChange = true; //打开编辑界面
      //回显数据
      this.formChange.project = item.project;
      this.formChange.id = item.id;
    },
    //分配审核人员按钮
    handleShare(index, item) {
      //打开界面
      this.dialogFormVisibleShare = true;
      //存储审核项目ID
      this.projectId = item.projectId
      //获取审核人员名单
      this.getShare(item);
    },
    //初始化两侧数据
    getShare(item) {
      const disabledId = item["createBy"];
      this.$http.post("/process/getShareUser/shareUser/" + item.projectId).then((res) => {
        this.shareUser = res;
        this.generateData(disabledId);
      });
    },
    getAllUser() {
      this.$http.post("/process/getShareUser/allShareUser").then((res) => {
        this.allShareUser = res;
      });
    },
    //提交右侧数据
    selectChange() {
      this.$http.post("/process/changeUserProcess/" + this.projectId, this.value).then(() => {
        this.dialogFormVisibleShare = false;
      })
    },
    generateData(disabledId) {
      this.data.length = 0;
      this.allShareUser.forEach((item) => {
        this.data.push({
          label: item.username,
          key: item.userId,
          disabled: disabledId === item.userId,
        });
      });
      this.value.length = 0;
      this.shareUser.forEach((id) => {
        this.value.push(id);
      });
    },
  },
  mounted() {
    this.getDataList();
    this.getAllUser();
  },
};
</script>
